<template>
  <uni-nav-bar title="呼叫安蓝服务" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="column" style="height:80vh">
    <image src="../../static/icon/big.svg" mode="" style="width:364rpx;height:364rpx"></image>
    <text class="but" @click="PagingService()">呼叫安蓝服务</text>
  </view>
  <!-- 呼叫安蓝 -->
  <uni-popup ref="callPopup" type="center" :is-mask-click="false">
    <callFil @close="closeCallPopup" @success="openSucceePopup"></callFil>
  </uni-popup>
  <!-- 呼叫成功 -->
  <uni-popup ref="callSuccee" type="center" :is-mask-click="false">
    <SucceeDed @close="closeSucceePopup"></SucceeDed>
  </uni-popup>
  <!-- 催单 -->
  <uni-popup ref="callUrge" type="center" :is-mask-click="false">
    <Urger @close="closeUrgePopup" @success="openUrgeSuccPopup" :orderDetaAll="orderDetaAll"></Urger>
  </uni-popup>
  <!-- 催单成功 -->
  <uni-popup ref="callUrgeSucc" type="center" :is-mask-click="false">
    <UrgeSuccess @close="closeUrgeSuccPopup"></UrgeSuccess>
  </uni-popup>
  <!-- 多次催单 -->
  <uni-popup ref="callUrgeNext" type="center" :is-mask-click="false">
    <UrgeNext @close="closeUrgeNextPopup" :orderDetaAll="orderDetaAll"></UrgeNext>
  </uni-popup>
  <!-- 手机号面板弹框 -->
  <uni-popup ref="PhonePadPopup" type="bottom" :is-mask-click="false">
    <PhonePad type="bind" @close="closePhonePad" />
  </uni-popup>
</template>

<script setup lang="ts">
  import { showLoading, errorToast } from '@/utils/prompt';
  import PhonePad from '@c/common/PhonePad.vue';
  import { onShow } from '@dcloudio/uni-app';
  import { navBack } from '@/utils/navigator';
  import callFil from '@c/callBack/call.vue';
  import SucceeDed from '@c/callBack/succeeded.vue';
  import Urger from '@c/callBack/urge.vue';
  import { getDriverID } from '@/stores/driverID';
  import UrgeSuccess from '@c/callBack/urgeSuccess.vue';
  import UrgeNext from '@c/callBack/urgeNext.vue';
  import { useUserStore } from '@/stores/user';
  import { toPublish } from '@mqtt';
  import { getCallInfo } from '@/gql/call';
  import { ref } from 'vue';
  const userInfo = useUserStore();
  const driver_id = getDriverID();
  const callPopup = ref(null)
  const callSuccee = ref(null)
  const callUrge = ref(null)
  const callUrgeSucc = ref(null)
  const callUrgeNext = ref(null)
  const PhonePadPopup = ref(null);

  const orderDetaAll = ref({})
  onShow(() => {
    if (!userInfo.avatar) {
      userInfo.getUserInfo();
    }
  });
  /**
   * 提交呼叫安蓝
   * 需提前绑定手机号码
   * 呼叫状态 首次/催单
   */
  function PagingService() {
    if (!userInfo.mobile) {
      openPhonePad()
    } else {
      showLoading('正在加载');
      const payload = {
        driver_id
      };
      toPublish('driver/getCallId', payload, (obj : any) => {
        uni.hideLoading();
        const { code, msg, data } = obj;
        if (code === 1) {
          openCallPopup()
        } else if (code === 0) {
          orderDetail(data.id)
        } else {
          errorToast(msg)
        }
      });
    }
  }
  /**
   * 获取催单详情
   */
  function orderDetail(id : number) {
    showLoading('正在加载');
    const payload = {
      query: getCallInfo,
      variables: {
        id
      },
    };
    toPublish('ql/plug/getCallInfo', payload, (obj : any) => {
      uni.hideLoading();
      const { get_call_info } = obj.data;
      orderDetaAll.value = get_call_info
      if (get_call_info.send_nums === 0) {
        openUrgePopup()
      } else {
        openUrgeNextPopup()
      }
    });
  }
  // 打开关闭呼叫安蓝弹框
  function openCallPopup() {
    callPopup.value.open()
  }
  function closeCallPopup() {
    callPopup.value.close()
  }
  // 打开关闭呼叫成功弹框
  function openSucceePopup() {
    callSuccee.value.open()
  }
  function closeSucceePopup() {
    callSuccee.value.close()
  }
  // 打开关闭催单弹框
  function openUrgePopup() {
    callUrge.value.open()
  }
  function closeUrgePopup() {
    callUrge.value.close()
  }
  // 打开关闭催单成功弹框
  function openUrgeSuccPopup() {
    callUrgeSucc.value.open()
  }
  function closeUrgeSuccPopup() {
    callUrgeSucc.value.close()
  }
  // 打开关闭多次催单弹框
  function openUrgeNextPopup() {
    callUrgeNext.value.open()
  }
  function closeUrgeNextPopup() {
    callUrgeNext.value.close()
  }
  // 打开关闭绑定手机号码弹框
  function openPhonePad() {
    PhonePadPopup.value.open();
  }
  function closePhonePad() {
    PhonePadPopup.value.close();
  }
</script>
<style scoped lang="less">
  .but {
    width: 638rpx;
    height: 80rpx;
    background: linear-gradient(69deg, #41A3FF 0%, #1B91FF 100%);
    border-radius: 5px;
    font-size: 36rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    text-align: center;
    line-height: 80rpx;
    margin-top: 60rpx;
  }
</style>